<!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 4.01//EN"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>CleanCity Project</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="xmlhttp.js"></script>
<style type="text/css"> 
  *, html { margin:0; padding:0 }
  div#map_canvas { width:60%; height:100%; }
  div#info { width:100%; height:100%; }
</style> 
<script type="text/javascript">
  var map;
  var XMLHttp = getXMLHttp();
  
  [#MACROS_MARKER_COORDS#]
  
  function initialize() {
    var myOptions = {
      zoom: 10,
      center: new google.maps.LatLng(59.9456, 30.2418),
      navigationControl: true,
      mapTypeControl: true,
      scaleControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    for (var i = 0, i_end = markerLats.length; i < i_end; ++i) {
      placeMarker(new google.maps.LatLng(markerLats[i], markerLons[i]), markerIDs[i]);
    }
  }
  
  function sendInfoRequectForMarker(markerID) {
    document.getElementById('info').innerHTML = "<center>Получение информации...</center>";
    XMLHttp.open("GET", "get_info?" + markerID);
    XMLHttp.onreadystatechange = handleMarkerInfoAnswer;
    XMLHttp.send(null);
  }
  
  function placeMarker(location, markerID) {
    var marker = new google.maps.Marker({
      position: location, 
      map: map,
      draggable: false
    });
    google.maps.event.addListener(marker, 'click', function(event) {
      sendInfoRequectForMarker(markerID);
    });
  }
  
  function handleMarkerInfoAnswer() {
    if (XMLHttp.readyState == 4) {
      document.getElementById('info').innerHTML = XMLHttp.responseText;
    }
  }
</script>
</head>
<body onload="initialize()">

<table width=100% border=0 align=center>

<tr>

<td width=60%><div id="map_canvas"></div></td>

<td width=4%></td>

<td width=36%>
<div id="info">
Щёлкните по нужной отметке на карте, чтобы просмотреть информацию
</div>
</td>

</tr>

</table>

</body>
</html>
